<template>
	<view style="width: 750rpx;height: 100vh;background-color: #F5F5F8;">
		<view style="width: 750rpx;height: 20rpx;"></view>
		<view style="width: 750rpx;background-color: #FFFFFF;">	
			<view style="width: 750rpx;height: 110rpx;background-color: #FFFFFF;">
				<view style="font-size: 34rpx;line-height: 92rpx;margin-top: 20rpx;margin-left: 30rpx;float: left;">检查名称</view>
				<input :value="value" @input="clearInput" style="font-size: 34rpx;line-height: 92rpx;margin-top: 20rpx;margin-left: 94rpx;height: 92rpx;float: left;" />
				<image src="../../static/btn_delete@3x.png" style="width: 40rpx;height: 40rpx;margin-top: 48rpx;float: right;margin-right: 20rpx;" @click="clearIcon()"></image>		
			</view>
			<view style="height: 2rpx;width: 720rpx;margin-left: 30rpx;background-color: #E5E5E5;"></view>
			<view style="width: 750rpx;height: 90rpx;background-color: #FFFFFF;display: flex;">
				<view style="font-size: 34rpx;line-height: 90rpx;margin-left: 30rpx;">起始时间</view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				    <view v-if="real" style="margin-left: 94rpx;font-size: 34rpx;line-height: 92rpx;color: #CCCCCC;float: left;">请选择</view>
					<view style="margin-left: 94rpx;font-size: 34rpx;line-height: 92rpx;float: left;" v-else>{{date}}</view>
					<view style="color: #C7C7CC;line-height: 22rpx;margin-top: 32rpx;left:	700rpx ;position: absolute;">></view>
				</picker>
				
			</view>
			<view style="height: 2rpx;width: 720rpx;margin-left: 30rpx;background-color: #E5E5E5;"></view>
			<view style="width: 750rpx;height: 90rpx;background-color: #FFFFFF;display: flex;">
				<view style="font-size: 34rpx;line-height: 90rpx;margin-left: 30rpx;">截止时间</view>
				<picker mode="date" :value="date1" :start="startDate" :end="endDate" @change="bindDateChange1">
				    <view v-if="real1" style="margin-left: 94rpx;font-size: 34rpx;line-height: 92rpx;color: #CCCCCC;float: left;">请选择</view>
					<view style="margin-left: 94rpx;font-size: 34rpx;line-height: 92rpx;float: left;" v-else>{{date1}}</view>
					<view style="color: #C7C7CC;line-height: 22rpx;margin-top: 32rpx;left:	700rpx ;position: absolute;">></view>
				</picker>
			</view>
			<view style="height: 2rpx;width: 720rpx;margin-left: 30rpx;background-color: #E5E5E5;"></view>
			<view style="width: 750rpx;height: 90rpx;background-color: #FFFFFF;display: flex;justify-content: space-between;">
				<view style="font-size: 34rpx;line-height: 90rpx;margin-left: 30rpx;">检查类型</view>
				<view style="font-size: 34rpx;line-height: 92rpx;float: right;margin-right: 30rpx;">全覆盖检查</view>
			</view>
			<view style="height: 2rpx;width: 720rpx;margin-left: 30rpx;background-color: #E5E5E5;"></view>
			<view style="width: 750rpx;height: 90rpx;background-color: #FFFFFF;display: flex;" @click="open()">
				<view style="font-size: 34rpx;line-height: 90rpx;margin-left: 30rpx;">检查范围</view>
				
					<view v-if="real2" style="margin-left: 94rpx;font-size: 34rpx;line-height: 92rpx;color: #CCCCCC;float: left;" @click="open()">请选择</view>
					<view style="margin-left: 94rpx;font-size: 34rpx;line-height: 92rpx;float: left;" v-else @click="open()">
						{{array.join('、')}}
					</view>
					<view style="color: #C7C7CC;line-height: 22rpx;margin-top: 32rpx;left:	700rpx ;position: absolute;" @click="open()">></view>
				
			</view>
			<view style="height: 2rpx;width: 720rpx;margin-left: 30rpx;background-color: #E5E5E5;"></view>
		</view>	
		<!-- <view style="display: flex;">
			<image src="../../static/icon!@3x.png" style="width: 40rpx;height: 40rpx;margin-left: 24rpx;margin-top: 12rpx;"></image>
			<view style="color: #F86E21;font-size: 26rpx;line-height: 26rpx;margin-top: 20rpx;margin-left: 10rpx;">已选择263个避灾点</view>
		</view> -->
		<view style="position: fixed;bottom: 0;width: 750rpx;height: 150rpx;background-color: #FFFFFF;">
			
			<button style="width: 690rpx;height: 94rpx;margin-left: 32rpx;margin-top: 14rpx;background-color: #519AFF;color: #FFFFFF;border-radius: 47rpx;"  @click="goto11()" v-if="real==false&&real1==false&&array.length!=0">立即创建</button>
			<button style="width: 690rpx;height: 94rpx;margin-left: 32rpx;margin-top: 14rpx;background-color: rgba(81, 154, 255, 0.3);color: #FFFFFF;border-radius: 47rpx;" v-else>立即创建</button>
		</view>
		<uni-popup ref="popup" >
			<view style="width: 100%;height: 600rpx;background-color: #FFFFFF;bottom: -68rpx;position: absolute;">
				<view style="display: flex;justify-content: space-between;padding: 16rpx 30rpx;">
					<view style="color: #388CFE;font-size: 34rpx;" @click="close()">取消</view>
					<view style="font-size: 34rpx;">检查范围</view>
					<view style="color: #388CFE;font-size: 34rpx;" @click="finish()">完成</view>
				</view>
				<view style="display: flex;justify-content: space-between;padding: 16rpx 32rpx;margin-top: 20rpx;" @click="ZJimg()">
					<view style="font-size: 32rpx;">镇街检查</view>
					<image src="../../static/icon_success@3x.png" style="width: 40rpx;height: 40rpx;" v-if="img"></image>
				</view>
				<view style="width: 690rpx;height: 1rpx;background-color: #EBEDF0;margin-left: 32rpx;margin-top: 12rpx;"></view>
				<view style="display: flex;justify-content: space-between;padding: 16rpx 32rpx;margin-top: 20rpx;" @click="CSimg()">
					<view style="font-size: 32rpx;">村社自查</view>
					<image src="../../static/icon_success@3x.png" style="width: 40rpx;height: 40rpx;" v-if="img1"></image>
				</view>
				<view style="width: 690rpx;height: 1rpx;background-color: #EBEDF0;margin-left: 32rpx;margin-top: 12rpx;"></view>
			</view>
		</uni-popup>
		<!-- <duoxuan  ref='duoxuan'></duoxuan> -->
	</view>
</template>

<script>
	// import duoxuan from '../FXducha/components/duoxuan.vue'
	export default {
		// components:{duoxuan},
		data() {
			const currentDate = this.getDate({
			           format: true
			       })
			return {
				date: currentDate,
				date1:'',
				showClearIcon:false,
				value:'2022年防汛检查',
				focus:false,
				real:true,
				real1:true,
				ttt:'',
				real2:true,
				array:[],
				date2:'',
				btnreal:true,
				img:false,
				img1:false,
				range:[]
			}
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		methods: {	
			bindDateChange(e){
				this.date = e.target.value
				console.log(e);
				console.log(this.date);
				this.real=false
				// if(this.real==false&&this.real1==false&&this.array.length!=0)
				// {
				// 	this.btnreal=false
				// 	console.log(this.btnreal);
				// }
			},
			bindDateChange1(e){
				this.date1 = e.target.value
				console.log(e);
				console.log(this.date1);
				this.real1=false
				// if(this.real==false&&this.real1==false&&this.array.length!=0)
				// {
				// 	this.btnreal=false
				// 	console.log(this.btnreal);
				// }
			},
			bindchange(e){
				console.log(e);
				this.date2=e.target.value
				this.real2=false
				// if(this.real==false&&this.real1==false&&this.array.length!=0)
				// {
				// 	this.btnreal=false
				// 	console.log(this.btnreal);
				// }
				
			},
			clearInput(event){
				console.log(event);
				this.value=event.detail.value;
			},
			clearIcon(){
				this.showClearIcon = false;
				this.value = '';
			},
			goto11(){
				this.$myRequest({
						url:'/project_flood/v1/check/task/create',
						data:{"name":this.value,"startTime":this.date,"endTime":this.date1,"type":2,"areaId":330212,"range":this.range}
					}).then((res)=>{
						uni.showToast({
							title:`任务创建成功！`,
							icon:'none'
						}).then((res)=>{
							setTimeout(()=>{
								uni.navigateTo({
									url:'duchaList'
								})
							},1000)
							
						})
						console.log('提交成功');
						
					});
				
			},
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        },
			open(){
			        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				// this.$refs.duoxuan.open([],'bottom')
				this.$refs.popup.open('bottom')
				console.log(123123);
			},	
			close(){
				this.$refs.popup.close()
				this.img=false
				this.img1=false
			},
			finish(){
				console.log(99999);
				
				this.$refs.popup.close()
				this.real2=false
				const array = []
				const range = []
				if(this.img==true){
					array.push('镇街检查')
					range.push(1)
				}
				if(this.img1==true){
					array.push('村社检查')
					range.push(2)
				}
				this.array = array
				this.range = range
			},
			ZJimg(){
				this.img=!this.img
			},
			CSimg(){
				this.img1=!this.img1
			}
		},
		// onShow() {
		// 	if(this.real==false&&this.real1==false&&this.array.length!=0)
		// 	{
		// 		this.btnreal=false
		// 		console.log(this.btnreal);
		// 		console.log(this.array.length);
		// 	}
		// }
	}
</script>

<style>

</style>
